<script setup lang="ts">
import { CountTo } from 'vue3-count-to'
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import { useHomeStore } from '@/stores/module/home'

const homeStore = useHomeStore() // 创建store实例
const { homeFlexLeft } = storeToRefs(homeStore)

const optionsTop = reactive([{}, {}]) as Array<any> //上区
const optionsBotton = reactive([{}, {}, {}, {}]) as Array<any> //下区
homeFlexLeft.value?.info?.forEach((item, index) => {
  if (index < 2) {
    optionsTop[index] = item
  } else {
    optionsBotton[index - 2] = item
  }
})
const getDecimals = (item, index) => {
  if (item.suffix === '万' && index !== 4) {
    return 2
  } else if (item.valueFormat && item.valueFormat.indexOf('.') > -1) {
    return item.valueFormat.split('.')[1].length
  }
  return 0
}
const components = {
  CountTo,
}

watch(
  () => homeFlexLeft.value.info,
  () => {
    homeFlexLeft.value.info.forEach((item, index) => {
      if (index < 2) {
        optionsTop[index] = item
      } else {
        optionsBotton[index - 2] = item
      }
    })
  },
  { deep: true }
)
</script>
<template>
  <card-box>
    <div class="box">
      <div class="box-son" v-for="(item, index) in optionsTop" :key="item.name">
        <div>
          <img
            v-if="index == 0"
            src="@/assets/images/canvsimage/member_icon.png"
            class="member_icon"
          />
          <img
            v-if="index == 1"
            src="@/assets/images/canvsimage/consume_icon.png"
            class="pictureIcon"
          />
        </div>
        <div class="box-son-son">
          <count-to
            :startVal="0"
            :decimals="getDecimals(item, index)"
            :duration="3000"
            :endVal="Number(item.valueFormat) || 0"
            :class="{ red: index <= 1 }"
          >
          </count-to>
          <div class="box-span">
            <span>{{ item.name }}</span>
            <span class="unit">{{ item.suffix }}</span>
          </div>
        </div>
      </div>
    </div>
  </card-box>
  <card-box>
    <div class="box">
      <div
        class="box-son"
        v-for="(item, index) in optionsBotton"
        :key="item.name"
      >
        <div>
          <img
            v-if="index < 2"
            src="@/assets/images/canvsimage/consume_icon.png"
            class="pictureIcon"
          />

          <img
            v-if="index >= 2"
            src="@/assets/images/canvsimage/active_icon.png"
            class="pictureIcon"
          />
        </div>
        <div class="box-son-son">
          <count-to
            :startVal="0"
            :decimals="getDecimals(item, index)"
            :duration="3000"
            :endVal="Number(item.valueFormat) || 0"
            :class="{ red: index < 1, blue: index >= 1 }"
          >
          </count-to>
          <div class="box-span">
            <span>{{ item.name }}</span>
            <span class="unit">{{ item.suffix }}</span>
          </div>
        </div>
      </div>
    </div>
  </card-box>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .member_icon {
    width: 60px;
    height: 50px;
    margin-left: 25px;
    margin-top: -10px;
    margin-right: 15px;
  }
  .pictureIcon {
    width: 46px;
    height: 46px;
    margin-left: 35px;
    margin-top: -15px;
    margin-right: 10px;
  }
  .box-son {
    display: flex;
    width: 50%;
    padding: 30px 0;

    .box-son-son {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 50px;

      width: 100%;
      .red {
        color: #ed5660;
        font-size: 20px;
      }
      .blue {
        color: #5df5f3;
        font-size: 18px;
      }
      .unit {
        color: #5df5f3;

        margin-left: 5px;
      }

      span {
        color: #fff;
        font-size: 12px;
      }
    }
  }
}
.box-span {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>
